<template>
    <div id="studies-results-item">
        <div class="image">
            <img src="@/assets/images/t.png">
    </div>
        <div class="_content">
            <div class="title">
                <h2>
                   {{data.title}}
                </h2>
            </div>
            <div class="thumbnail-image">
                <img src="@/assets/images/t.png">
            </div>
            <div class="pubdate">
                <p>{{data.addTime}}</p>
            </div>
            <Icons :browse="data.browse * 1" :star="data.star * 1" :awesome="data.awesome * 1"/>
        </div>
    </div>
</template>

<script>
    import Icons from "../icons/Icons";
    export default {
        props: {
            data: {
                type: Object,
                require: true
            }
        },
        components: {
          Icons
        },
        name: "StudiesResultsItem"
    }
</script>

<style lang="less">
    #studies-results-item {
        display: flex;
        width: 850px;
        padding-bottom: 10px;
        border-bottom: .1px solid #EEEEEE;
        .image {
            margin-top: 20px;

            img {
                width: 215px;
                height: 140px;
            }
        }

        ._content {
            .title {
                width: 569px;
                margin-top: 25px;
                margin-left: 10px;

                h2 {
                    width: 569px;
                    height: 50px;
                    left: 314px;
                    top: 201px;
                    color: rgba(80, 80, 80, 1);
                    font-size: 18px;
                    line-height: 150%;
                    text-align: left;
                    font-weight: bold;
                }
            }

            .thumbnail-image {
                width: 35px;
                height: 35px;
                margin-top: 60px;
                margin-left: 20px;
                border-radius: 16px;
                display: inline-block;
            }

            .pubdate {
                color: #9EA3A8;
                display: inline-block;
                height: 35px;
                line-height: 35px;
                margin-left: 40px;
                p {
                    text-align: center;
                    font-size: 14px;
                    height: 35px;
                    overflow: hidden;
                }
            }

        }
    }


</style>
